<template>
  <div class="box">
    <div class="aboutbox">
      <div class="about">
        <div class="topbar">
          <div class="topbaritem">About</div>
          <div class="topbaritem">Careers</div>
          <div class="topbaritem">Mission</div>
          <div class="topbaritem">Press</div>
        </div>
      </div>
    </div>
    <div class="abouttext isPC">
      <el-row class="flexbox">
        <el-col :span="12" :md="12" :sm="24" :xs="24">
          <div class="p1img">
            <img
              src="https://images.ctfassets.net/c5bd0wqjc7v0/2gsOMm2A5SOFiZiFUefQfd/147484f67bf9a19519d53ee1c54103b4/Unsplash-xE5SAT0WeTQ.jpg"
              alt="">
          </div>
        </el-col>
        <el-col :span="12" :md="12" :sm="24" :xs="24">
          <div class="p1text">
            <div class="title">
              About Coinbase
            </div>
            <div class="text">
              Crypto creates economic freedom by ensuring that people can participate fairly in the economy, and Coinbase
              is on a mission to increase economic freedom for more than 1 billion people. We’re updating the century-old
              financial system by providing a trusted platform that makes it easy for people and institutions to engage
              with crypto assets, including trading, staking, safekeeping, spending, and fast, free global transfers. We
              also provide critical infrastructure for onchain activity and support builders who share our vision that
              onchain is the new online. And together with the crypto community, we advocate for responsible rules to make
              the benefits of crypto available around the world.
            </div>
          </div>
        </el-col>
      </el-row>
    </div>


    <div class="abouttext isphone">
      <el-row class="flexbox">
        <el-col :span="12" :md="12" :sm="24" :xs="24">
          <div class="p1text">
            <div class="title">
              About Coinbase
            </div>
            <div class="text">
              Crypto creates economic freedom by ensuring that people can participate fairly in the economy, and Coinbase
              is on a mission to increase economic freedom for more than 1 billion people. We’re updating the century-old
              financial system by providing a trusted platform that makes it easy for people and institutions to engage
              with crypto assets, including trading, staking, safekeeping, spending, and fast, free global transfers. We
              also provide critical infrastructure for onchain activity and support builders who share our vision that
              onchain is the new online. And together with the crypto community, we advocate for responsible rules to make
              the benefits of crypto available around the world.
            </div>
          </div>
        </el-col>
        <el-col :span="12" :md="12" :sm="24" :xs="24">
          <div class="p1img">
            <img
              src="https://images.ctfassets.net/c5bd0wqjc7v0/2gsOMm2A5SOFiZiFUefQfd/147484f67bf9a19519d53ee1c54103b4/Unsplash-xE5SAT0WeTQ.jpg"
              alt="">
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="numtext">
      <div class="numbox">
        <el-row>
          <el-col :span="12" :md="12" :sm="24" :xs="24">
            <div class="numtitle">
              Coinbase powers the cryptoeconomy
            </div>
          </el-col>
          <el-col :span="12" :md="12" :sm="24" :xs="24">
            <div class="numitem">
              Customers around the world discover and begin their journeys with crypto through Coinbase.
              <br>
              <br>
              245,000 ecosystem partners in over 100 countries trust Coinbase to easily and securely invest, spend, save,
              earn, and use crypto.
            </div>
          </el-col>


        </el-row>
      </div>

      <div class="moneybox">
        <div class="numitembox">
          <div class="bignum">
            $154B
          </div>
          <div class="smallnum">
            Quarterly volume traded
          </div>
        </div>
        <div class="numitembox">
          <div class="bignum">
            $193B
          </div>
          <div class="smallnum">
            Safeguarded assets
          </div>
        </div>
        <div class="numitembox">
          <div class="bignum">
            100+
          </div>
          <div class="smallnum">
            Countries
          </div>
        </div>
        <div class="numitembox">
          <div class="bignum">
            3,400+
          </div>
          <div class="smallnum">
            Employees
          </div>
        </div>
      </div>

    </div>

    <!-- Our Commitment to Compliance-->

    <div class="commitmentbox">
      <el-row>
        <el-col :span="12" :md="12" :sm="24" :xs="24">
          <div class="commitmentext">
            <div class="commitmenttitle">
              Our Commitment to Compliance
            </div>
            <div class="commitmenttext">
              A strong compliance foundation is critical to Coinbase’s mission of being the most trusted crypto platform.
              To this end, we have developed a Compliance Program that is rooted in best practices from traditional
              financial services as well as innovative, sophisticated compliance technology to bring the crypto industry
              forward. We hold a high standard for what assets we list, what services we provide, and who has access to
              our products.
              <br>
              <br>
              <br>

              Check out the links below to learn more about our commitment to compliance and the technology we use to keep
              the crypto economy safe.
            </div>
            <div class="commitmentlink">
              <a href="javascript:">
                <el-icon size="20px" style="vertical-align: middle; /* 垂直居中对齐 */ margin-right: 10px;">
                  <Document />
                </el-icon>Know-your-customer (KYC) verification
              </a>
              <a href="javascript:">
                <el-icon size="20px" style="vertical-align: middle; /* 垂直居中对齐 */ margin-right: 10px;">
                  <Document />
                </el-icon>Compliance Requirements
              </a>
              <a href="javascript:">
                <el-icon size="20px" style="vertical-align: middle; /* 垂直居中对齐 */ margin-right: 10px;">
                  <Document />
                </el-icon>Scaled Compliance Solutions
              </a>
            </div>
          </div>
        </el-col>
        <el-col :span="12" :md="12" :sm="24" :xs="24">
          <div class="commitmentimg">
            <img
              src="https://images.ctfassets.net/c5bd0wqjc7v0/V1ohRCN3TNAXc1CfBnFMn/44f2a6afe26a58ca64a148fd1af8348b/image__10_.png"
              alt="" srcset="">
          </div>
        </el-col>
      </el-row>
    </div>


    <!-- Recent Compliance Blogs -->

    <div class="recent" v-for="item in 3">
      <div class="recentbox">
        <div class="recenttitle">
          Recent Compliance Blogs
        </div>
        <div class="recentitem">
          <div class="recentitembox">
            <el-row :gutter="20">
              <el-col :span="5" :md="5" :sm="4" :xs="4">
                <div class="recentimg">
                  <img
                    src="https://images.ctfassets.net/c5bd0wqjc7v0/1uMgBz3QSJqDt9kYjnO8dX/73177146979fc36d571549caa15338ff/0_IjELH5nf-6_Az3wk.png"
                    alt="">
                </div>
              </el-col>
              <el-col :span="13" :md="13" :sm="20" :xs="20">
                <div class="recentwords">
                  <div class="recentsmall">
                    28 april 2023
                  </div>
                  <div class="recenttitletext ">
                    How Coinbase monitors tokens we list for ongoing compliance
                  </div>
                  <div class="recenttext ">
                    Coinbase monitors the tokens we list to ensure they remain aligned with our listing standards.
                  </div>
                </div>
              </el-col>

              <el-col class="isphone" :span="4" :md="4" :sm="24" :xs="24">
                <div class="recenttext " style="padding: 40px 0px;">
                  Coinbase monitors the tokens we list to ensure they remain aligned with our listing standards.
                </div>
              </el-col>
              <el-col class="isphone" :span="4" :md="4" :sm="12" :xs="12">
                <div
                  style="font-size: 13px;color: #5B616E;height: 100%;display: flex;flex-direction: column;justify-content: center;">
                  <div> 28 april 2023</div>
                </div>
              </el-col>
              <el-col :span="4" :md="4" :sm="12" :xs="12">
                <div class="recenbtnbox">
                  <div class="recenbtn">
                    Read the post
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

    </div>


    <!-- Our executive team -->

    <div class="executiveteam">
      <div class="executiveteambox">
        <div class="executiveteamtitle">
          Our Executive Team
        </div>
        <div class="executiveitembox">
          <div class="executiveitem" v-for="item in 6">
            <div class="item">
              <div class="avator">
                <img
                  src="https://images.ctfassets.net/c5bd0wqjc7v0/Gb1z4fQgJf1R0iluwQnMG/0dabfde8014de86171a5dbc68dd29c7c/brian.jpg"
                  alt="">
              </div>
              <div class="name">
                <el-icon style="color: #5B616E;padding-right: 10px;">
                  <Avatar />
                </el-icon>Brian Armstrong
              </div>
              <div class="sub">
                Co-Founder & Chief Executive Officer
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- Our Board of Directors -->

    <div class="executiveteam">
      <div class="executiveteambox">
        <div class="executiveteamtitle">
          Our Board of Directors
        </div>
        <div class="executiveitembox">
          <div class="executiveitem four" v-for="item in 6">
            <div class="item">
              <div class="name">
                <el-icon style="color: #5B616E;padding-right: 10px;">
                  <Avatar />
                </el-icon>Brian Armstrong
              </div>
              <div class="sub">
                Co-Founder & Chief Executive Officer
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>


    <!-- Global Advisory Council -->
    <div class="executiveteam">
      <div class="executiveteambox">
        <div class="executiveteamtitle">
          Global Advisory Council
        </div>
        <div class="executiveitembox">
          <div class="executiveitem four" v-for="item in 6">
            <div class="item">
              <div class="name">
                John Anzalone
              </div>
              <div class="sub">
                Former Secretary of Defense; Chairman, National Security Practice, Red Cell Partners
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>


    <!-- Working at Coinbase-->
    <div style="width: 100%;background: #F5F8FF;">
      <div class="commitmentbox" style="margin: 0 auto;height: 452px;padding-bottom: 0px;max-width: 1356px;">
        <el-row>
          <el-col :span="12" :md="12" :sm="24" :xs="24">
            <div class="commitmentext">
              <div class="commitmenttext">
                <div style="font-size: 34px;color: #333;margin-bottom: 30px;">
                  Working at Coinbase
                </div>
                Our mission is to increase economic freedom in the world. Join us and make an impact at a global scale.
                <br>
                <br>
                <br>
              </div>
              <div class="commitmentlink">
                <a href="javascript:">
                  Know-your-customer (KYC) verification
                </a>

              </div>
            </div>
          </el-col>
          <el-col :span="12" :md="12" :sm="24" :xs="24">
            <div class="commitmentimg">
              <img
                src="https://images.ctfassets.net/c5bd0wqjc7v0/5btpBgFB1sHcbmqLExyYvK/06d60e58192700a316a6bda8b915b1c5/working-at-cb-1.jpg"
                alt="" srcset="">
            </div>
          </el-col>
        </el-row>
      </div>
    </div>


  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import 'element-plus/theme-chalk/display.css'
</script>

<style lang="scss" scoped>
.box {
  font-family: Arial, Helvetica, sans-serif !important;

  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.aboutbox {
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);

}

.about {
  max-width: 1220px;
  margin: 0 auto;
  height: 54px;

  .topbar {
    padding: 18px 20px;
    margin: 0 auto;
    max-width: 317.5px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;

    .topbaritem {
      &:hover {
        color: #4575F3;
      }
    }

  }
}

.abouttext {
  max-width: 1356px;
  margin: 0 auto;
  height: 837px;



}

.p1img {
  width: 100%;
  height: 837px;

  img {
    margin-top: 88px;
    width: 100%;
    object-fit: cover;
  }
}

.p1text {
  box-sizing: border-box;
  width: 100%;
  height: 837px;
  padding: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;


  .title {
    font-size: 60px;

  }

  .text {
    padding-top: 16px;
    line-height: 25px;
    color: #5B616E;
  }
}

.isphone {
  display: none;
}

.isPC {
  display: block;
}


//Our Commitment to Compliance
.numtext {
  width: 100%;
  height: 628px;
  background: #F5F8FF;
  margin-top: 120px;
  font-size: 16px;
}

.numbox {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 40px;

  .numtitle {
    font-size: 40px;
  }

  .numitem {
    padding-top: 10px;
    color: #5B616E;
    line-height: 20px;
  }
}

.moneybox {
  margin: 50px auto;
  max-width: 1180px;
  display: flex;
  flex-wrap: wrap;
}

.numitembox {
  width: 317px;
  height: 138px;
  flex: 0 0 33.33%;
  /* 每个项目占据 33.33% 的宽度，即一行三个 */
  box-sizing: border-box;
  padding: 0 25px;
  border-left: 1px solid #5B616E;
  margin-bottom: 50px;
  position: relative;

  .bignum {
    font-size: 74px;
  }

  .smallnum {
    position: absolute;
    bottom: 0px;
    left: 25px;
  }
}


//Our Commitment to Compliance

.commitmentbox {
  margin: 0 auto;
  max-width: 1220px;
  padding-bottom: 200px;
  margin-top: 120px;

  .commitmentext {
    padding: 40px 80px 40px 0px;

    .commitmenttitle {
      font-size: 30px;

    }

    .commitmenttext {
      margin-top: 20px;
      color: #5B616E;
    }

    .commitmentlink {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
  }


  .commitmentimg {
    //垂直居中
    display: flex;
    justify-content: center;
    align-items: center;
    /* 垂直居中对齐 */

    width: 100%;
    height: 100%;

    img {
      margin-top: 0px;
      width: 100%;
      object-fit: cover;
    }
  }

}

//  Recent Compliance Blogs


.recent {
  width: 100%;

  .recentbox {
    margin: 0 auto;
    max-width: 1220px;
    margin-bottom: 32px;

    .recenttitle {
      margin-bottom: 30px;
      font-size: 40px;
    }

    .recentitem {
      width: 100%;
      height: 140px;
      padding-bottom: 60px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.12);

      .recentitembox {
        width: 100%;
        height: 140px;

        .recentimg {
          max-width: 200px;
          height: 100%;
          padding: 20px 0px;

          img {
            margin-top: 0px;
            width: 100%;
            object-fit: cover;
          }


        }


        .recentwords {
          .recentsmall {
            font-size: 13px;
            color: #5B616E;
          }

          .recenttitletext {
            font-size: 28px;
            color: #0A0B0D;
          }

          .recenttext {
            font-size: 16px;
            color: #5B616E;
          }

        }

        .recenbtnbox {
          display: flex;
          flex-direction: column;
          //垂直居中
          justify-content: center;
          align-items: center;
          height: 100%;

          .recenbtn {
            width: 173px;
            height: 56px;
            background: #0052FF;
            line-height: 56px;
            text-align: center;
            border-radius: 56px;
            color: #fff;
            font-weight: 800;
            cursor: pointer;
          }
        }
      }
    }
  }


}


//Our executive team
.executiveteam {
  padding-top: 120px;
  width: 100%;

  .executiveteambox {
    margin: 0 auto;
    max-width: 1220px;

    .executiveteamtitle {
      font-size: 34px;
    }

    .executiveitembox {
      margin-top: 56px;
      display: flex;
      flex-wrap: wrap;


      .executiveitem {
        box-sizing: border-box;
        width: 100%;
        // height: 324px;
        flex: 0 0 33.33%;
        padding: 30px;
        margin-bottom: 30px;

        .item {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .avator {
            width: 230px;
            height: 230px;
            box-sizing: border-box;
            border-radius: 50%;
            padding: 10px;
            border: 1px solid #bbb;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              object-fit: cover;
            }
          }

          .name {
            cursor: pointer;
            color: #0052FF;
            margin-top: 20px;
            width: 230px;
            font-weight: 600;
            text-align: center;
          }

          .sub {
            font-size: 14px;
            padding: 4px 0px 0px 0px;
            width: 230px;
            color: #5B616E;
            text-align: center;
          }
        }
      }
    }

  }



}


.four {
  flex: 0 0 25%;

}



@media screen and (max-width: 768px) {

  .isphone {
    display: block;
  }

  .isPC {
    display: none;
  }

  /* 在此处添加针对手机屏幕的样式设置 */
  .abouttext {
    margin: 0 auto;
    height: auto;

  }

  .p1img {
    width: 100%;
    height: auto;

    img {
      margin-top: 0px;
      width: 100%;
      object-fit: cover;
    }
  }

  .p1text {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title {
      font-size: 34px;

    }

    .text {
      padding-top: 16px;
      line-height: 20px;
      color: #5B616E;

    }
  }





  //Our Commitment to Compliance PHONE


  .numtext {
    width: 100%;
    height: auto;
    background: #F5F8FF;
    margin-top: 60px;
    font-size: 16px;
  }

  .numbox {
    padding: 20px 20px;
    max-width: 1180px;
    margin: 0 auto;

    .numtitle {
      font-size: 40px;
    }

    .numitem {
      padding-top: 10px;
      color: #5B616E;
      line-height: 20px;
    }
  }

  .moneybox {
    padding: 20px;
    margin: 50px auto;
    max-width: 1180px;
    display: flex;
    flex-wrap: wrap;
  }

  .numitembox {
    width: 317px;
    height: 138px;
    flex: 0 0 33.33%;
    /* 每个项目占据 33.33% 的宽度，即一行三个 */
    box-sizing: border-box;
    padding: 0 25px;
    border-left: 1px solid #5B616E;
    margin-bottom: 25px;
    position: relative;

    .bignum {
      font-size: 64px;
    }

    .smallnum {
      position: absolute;
      bottom: 0px;
      left: 25px;
      color: #5B616E;

    }
  }


  //Our Commitment to Compliance PHONE

  .commitmentbox {
    margin: 0 auto;
    max-width: 1220px;
    height: 600px;
    margin-top: 80px;

    .commitmentext {
      padding: 20px 20px;

      .commitmenttitle {
        font-size: 30px;

      }

      .commitmenttext {
        margin-top: 20px;
        color: #5B616E;
      }

      .commitmentlink {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        font-size: 12px;
      }
    }


    .commitmentimg {
      //垂直居中
      display: flex;
      justify-content: center;
      align-items: center;
      /* 垂直居中对齐 */

      width: 100%;
      height: 100%;

      img {
        margin-top: 0px;
        width: 100%;
        object-fit: cover;
      }
    }

  }


  //  Recent Compliance Blogs PHONE


  .recent {
    width: 100%;

    .recentbox {
      padding: 0px 20px;
      margin: 0 auto;
      max-width: 1220px;
      margin-bottom: 32px;

      .recenttitle {
        text-align: center;
        margin-bottom: 30px;
        font-size: 28px;
      }

      .recentitem {
        width: 100%;
        height: auto;
        padding-bottom: 60px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);

        .recentitembox {
          width: 100%;
          height: auto;

          .recentimg {
            max-width: 200px;
            height: 100%;
            padding: 20px 0px;

            img {
              margin-top: 0px;
              width: 100%;
              object-fit: cover;
            }


          }


          .recentwords {
            .recentsmall {
              font-size: 13px;
              color: #5B616E;
            }

            .recenttitletext {
              font-size: 20px;
              color: #0A0B0D;
            }

            .recenttext {
              font-size: 16px;
              color: #5B616E;
              display: none;

            }

          }

          .recenbtnbox {
            display: flex;
            flex-direction: column;
            //垂直居中
            justify-content: center;
            align-items: center;
            height: 100%;

            .recenbtn {
              width: 173px;
              height: 56px;
              background: #0052FF;
              line-height: 56px;
              text-align: center;
              border-radius: 56px;
              color: #fff;
              font-weight: 800;
              cursor: pointer;
            }
          }
        }
      }
    }


  }

  .four {
    flex: 1;
  }



  //Our executive team PHONE
  .executiveteam {
    padding-top: 120px;
    width: 100%;

    .executiveteambox {
      margin: 0 auto;
      max-width: 1220px;

      .executiveteamtitle {
        font-size: 34px;
        text-align: center;
      }

      .executiveitembox {
        margin-top: 56px;
        display: flex;
        flex-wrap: wrap;


        .executiveitem {
          box-sizing: border-box;
          width: 100%;
          // height: 324px;
          flex: 1;
          padding: 30px;
          margin-bottom: 30px;


          .item {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .avator {
              width: 180px;
              height: 180px;
              box-sizing: border-box;
              border-radius: 50%;
              padding: 10px;
              border: 1px solid #bbb;

              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                object-fit: cover;
              }
            }

            .name {
              cursor: pointer;
              color: #0052FF;
              margin-top: 20px;
              width: 230px;
              font-weight: 600;
              text-align: center;
            }

            .sub {
              font-size: 14px;
              padding: 4px 0px 0px 0px;
              width: 230px;
              color: #5B616E;
              text-align: center;
            }
          }
        }
      }

    }



  }

  /* 例如，更改 body 的字体大小 */

}
</style>